<template>
  <div class="phoneLogin" v-if="isGoto === 2">
    <div class="phoneLogin-from">
      <el-form :model="user" :rules="rules" ref="form" label-width="80px">
        <div class="phoneLogin-item">
        <el-form-item prop="phone" class="phone-input">
          <div class="icondown">
            <span>+</span>
            <span>86</span>
            <i class="el-icon-caret-bottom"></i>
          </div>
          <el-input
            size="small"
            type="phone"
            v-model="user.phone"
            autocomplete="off"
            placeholder="请输入手机号"
          ></el-input>
        </el-form-item>
        <el-form-item   v-if="!isShowMessage" prop="password" class="phone-input">
          <el-input
            size="small"
            type="password"
            v-model="user.password"
            autocomplete="off"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
        <el-form-item   v-if="isShowMessage" prop="captcha" class="phone-input">
          <el-input
            size="small"
            type="captcha"
            v-model="user.captcha"
            autocomplete="off"
            placeholder="请输入验证码"
          ></el-input>
          <el-button 
          @click="sendCode(user.phone)" 
          :disabled="display" 
          size="small" 
          type="info" 
          plain 
          class="getCaptcha">
          {{display?`还剩${time}s`:'获取验证码'}}
          </el-button>
        </el-form-item>
         </div>
        <div class="phoneLogin-top">
          <div class="loginMode">
            <span @click="showMessage">{{isShowMessage?'短信':'密码'}}登录</span>
            <div class="loginMode-auto">
              <input checked type="checkbox" />
              <span class="auto" >自动登录</span>
            </div>
          </div>
          <button class="login_button" @click.prevent="submitForm">登 &nbsp;录</button>
        </div>
      </el-form>
    </div>
    <div class="phoneLogin-footer">
      <div @click="$emit('update:isGoto', 1)">&lt; 其他登录方式</div>
      <p>没有账号？ 免费注册 ></p>
    </div>
  </div>
</template>

<script>
import { sendRegisterCode,verifyCode,gotoPhoneLogin } from '@/api/login'
export default {
  name: 'PhoneLogin',
  props: {
    isGoto: {
      type: Number
    }
  },
  data() {
      const phoneValidtor=(rule,value,callback)=>{
          if(!value){
             callback('手机不能为空')  
              return
          }
          if(!(/^(?:(?:\+|00)86)?1[3-9]\d{9}$/.test(value))){
               callback('手机号格式有误')
               return
          }else{
              callback()
          }
      }
      const passwordValidtor=(rule,value,callback)=>{
          if(!value){
             callback('密码不能为空')  
              return
          }
        //   if(!(/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/.test(value))){
        //        callback('密码格式有误')
        //        return
        //   }
        if(!(/^[A-Za-z0-9]{8,}$/.test(value))){
               callback('密码格式有误')
               return
          }
        else{
              callback()
          }
      }
    return {
      user: {
        //   手机号
        phone: '',
        //   验证码
        captcha: '',
        // 密码
        password:'',

      },
    //   时间
      time:30,
      // 禁用获取验证码btn
      display:false,
      //  切换密码登陆还是验证码
      isShowMessage:true,
      rules: {
        phone: [
          { required: true, validator:phoneValidtor,trigger: 'blur' },
        ],
        captcha: [{ required: true, message: '请输入验证码',trigger: 'blur' }],
        password:[
          { required: true, validator:passwordValidtor,trigger: 'blur' }  
        ]
      }
    }
  },
  methods: {
      // 发送验证码
     async sendCode(phone){
         if(!phone) return
         await sendRegisterCode(phone)
         this.display=true
         this.times=setInterval(()=>{
        if(this.time<=1){
          clearInterval(this.times)
          this.time=10
          this.display=false
        }
        this.time--
      },1000)
      },
    //   密码登陆
   showMessage(){
       this.isShowMessage=!this.isShowMessage
       //  清空表单验证
       this.$refs.form?.clearValidate()
        
   },
      //提交表单
    submitForm() {
      this.$refs.form.validate( async (valid) => {
        if (valid) {
         const {phone,captcha,password}=this.user
         if(this.isShowMessage){
        //  验证验证码
         const {data,message}= await verifyCode(phone,captcha)
         if(data){
              this.$message('登陆成功');
             this.$emit('update:isGoto', 1)

         }else{
           this.$message(message);
         }
         }else{
           const res=await gotoPhoneLogin(phone,password)
           if(res.token){
               localStorage.setItem("token",res.token)
               this.$message('登陆成功')
                this.$emit('update:isGoto', 1)
           }
            this.$message('登陆异常')
           
         }
        } 
      })
    }
  },
  beforeDestroy(){
      // 以防万一，在清一次！！！
      clearInterval(this.times)
  }
}
</script>

<style lang="less" scoped>
.phoneLogin {
  width: 100%;
  .phoneLogin-from {
    background: #fff;
    padding: 30px 0 43px 0;
    box-shadow: 0 20px 20px #888;
    width: 100%;
  }
}
.phoneLogin-item{
    width: 220px;
    padding-left:80px;
}
.phoneLogin-top {
  width: 220px;
  margin: 0 auto;
}
.phone-input {
    // margin-bottom:0;
    .getCaptcha{
      margin-left:10px;
    }
  .icondown {
    border-radius: 5px;
    font-size: 12px;
    width: 50px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border: 1px solid #dcdfe6;
  }
}
.loginMode {
  margin-top:10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
  color: #737373;
  .loginMode-auto {
    display: flex;
    align-items: center;
    .auto {
      padding-left: 5px;
    }
  }
}
.phoneLogin-footer {
  display: flex;
  padding: 0 20px;
  justify-content: space-between;
  align-items: center;
  background-color: #f7f7f7;
  line-height: 50px;
  border-top: 1px solid #ccc;
  box-shadow: 0 20px 20px #888;
  border-radius: 0 0 5px 5px;
  div {
    color: #4190cf;
  }
  p {
    color: #999;
  }
}
</style>
